<script>
import {wu_ping} from '@/activity/wu_pin/wu_ping'
import {ling_chong} from '@/activity/wu_pin/ling_chong'
import {userStatus} from "@/pinia/userStatus"
import {useMessage} from 'naive-ui'
import {ref} from "vue";

export default {
  props: ['huiDaoXian'],
  emits: ['changeComponent', 'huiDaoCome'],
  setup(props, {emit}) {
    const user = userStatus()
    const message = useMessage()
    let ling_chong_page = ref({pageSize: 2, pageNum: 1})
    let wu_ping_page = ref({pageSize: 6, pageNum: 1})
    let ling_chong_list = ref(ling_chong.slice((ling_chong_page.value.pageNum - 1) * ling_chong_page.value.pageSize, ling_chong_page.value.pageNum * ling_chong_page.value.pageSize));
    let wu_ping_list = ref(wu_ping.slice((wu_ping_page.value.pageNum - 1) * wu_ping_page.value.pageSize, wu_ping_page.value.pageNum * wu_ping_page.value.pageSize));
    return {
      user,
      wu_ping,
      ling_chong,
      ling_chong_num: ling_chong.length,
      use_form: {},
      wu_ping_page,
      ling_chong_page,
      ling_chong_list,
      wu_ping_list,
      buy_ling_shi(v, type) {
        if (v.cost > user.wallet.ling_shi) {
          message.warning("少侠您的灵石不够哦。小店有灵兽出售，可以帮助您获取灵石，要不要看看呢")
          return
        }
        user.buy_ling_shi(v, type)
      },
      refresh_wu_ping() {
        wu_ping_list = wu_ping.slice((ling_chong_page.value.pageNum - 1) * ling_chong_page.value.pageSize, ling_chong_page.value.pageNum * ling_chong_page.value.pageSize);
      },
      refresh_ling_chong() {
        ling_chong_list.value = ling_chong.slice((ling_chong_page.value.pageNum - 1) * ling_chong_page.value.pageSize, ling_chong_page.value.pageNum * ling_chong_page.value.pageSize);
      },
      hui_dao_xian() {
        props.huiDaoXian()
      },
      hui_dao_come() {
        emit('huiDaoCome')
      },
      change_component(num) {
        emit('changeComponent',num)
      }
    }
  },
  methods: {
    handleUpdateShow(i) {
      this.use_form[i] = 1
    }
  }
}

</script>

<template>
  <div class="fang_shi_main">
    <n-divider>宗门（坊市）</n-divider>
    <div class="fang_shi_description">
      宗门修士为方便互通有无，在宗门中建立起了一间坊市。其中法宝，灵丹，灵宠等稀缺资源因有尽有，可携带灵石前往交易。
    </div>
    <div class="xiu_xing_xuan_zhe">
      <n-list clickable :show-divider="false">
        <n-list-item @click="hui_dao_xian()">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 修行</n-gradient-text>
        </n-list-item>
        <n-list-item @click="hui_dao_come()">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 宗门</n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="zhong_men_xuan_zhe">
      <n-list clickable :show-divider="false">
        <n-list-item @click="change_component('1')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 灵矿 </n-gradient-text>
        </n-list-item>
        <n-list-item @click="change_component('8')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 灵宠 </n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="fang_shi_wu_ping">
      <div class="item" v-for="(v) in wu_ping">
        <n-popover trigger="hover">
          <template #trigger>
            <div class="equipment_info">
              <div class="equipment_img">
                <n-image width="46" height="46" :src="v.image"/>
              </div>
              <div>
                <p>{{ v.name }}</p>
                <p>价值：{{ v.cost }}</p>
              </div>
            </div>
          </template>
          <div class="equipment_detail">
            <div>
              <p> {{ v.name }} </p>
              <p> {{ v.describe }} </p>
              <n-button type="tertiary" @click="buy_ling_shi(v,'goods')"> 购买</n-button>
            </div>
          </div>
        </n-popover>
      </div>
    </div>
    <div class="fang_shi_ling_chong">
      <div class="item" v-for="(v) in ling_chong_list">
        <n-popover trigger="hover">
          <template #trigger>
            <div class="equipment_info">
              <div class="equipment_img">
                <n-image width="46" height="46" :src="v.image"/>
              </div>
              <div>
                <p>{{ v.name }}</p>
                <p>价值：{{ v.cost }}</p>
              </div>
            </div>
          </template>
          <div class="equipment_detail">
            <div>
              <p> {{ v.name }} </p>
              <p> {{ v.describe }} , 探索可得 {{ v.velocity }} 灵石 </p>
              <n-button type="tertiary" @click="buy_ling_shi(v,'chong')"> 购买</n-button>
            </div>
          </div>
        </n-popover>
      </div>
      <div class="ling_chong_page">
        <n-pagination v-model:page="ling_chong_page.pageNum"
                      :page-count=" Math.ceil(ling_chong_num / ling_chong_page.pageSize)" simple
                      :onUpdatePage="refresh_ling_chong"/>
      </div>
    </div>
    <div class="ling_kuang_ling_shi">
      <div> 拥有灵石：{{ user.wallet.ling_shi }}</div>
    </div>
  </div>
</template>

<style scoped>

.fang_shi_main {
  width: 100%;

  position: relative;
  height: 680px;
}

.xiu_xing_xuan_zhe {
  position: absolute;
  width: 128px;
  left: 8px;
  bottom: 18px;
}

.zhong_men_xuan_zhe {
  position: absolute;
  width: 128px;
  right: 8px;
  bottom: 18px;
}

.fang_shi_description {
  position: absolute;
  /** 文字首行缩进 */
  text-indent: 2em;
  left: 8px;
  right: 3px;
}

.fang_shi_wu_ping {
  position: relative;
  top: 88px;
  text-align: center;
  margin: 0 auto;
  width: 366px;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
}

.fang_shi_ling_chong {
  position: relative;
  top: 166px;
  width: 366px;
  margin: 0 auto;
  text-align: center;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;

}

.ling_chong_page {
  position: absolute;
  top: 80px;
}

.item {
  width: 160px;
  margin-top: 12px;

  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 #ccc;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.equipment_info {
  width: 160px;
  height: 55px;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.equipment_img {
  height: 46px;
}

.equipment_detail {

  position: relative;
  user-select: none;
  width: 288px;
  height: 122px;
  background-color: rgba(255, 255, 255, 0.86);
  border-radius: 5px;
  padding: 8px;
  font-family: "楷体", serif;

}

.ling_kuang_ling_shi {
  position: absolute;
  left: 8px;
  right: 6px;
  bottom: 88px;
}

.n-list {
  background-color: inherit !important;
  user-select: none;

  display: flex;
  justify-content: space-around;
  z-index: 999;
}

</style>
